<template>
    <el-container>
        <el-header>
            <!-- 头部 -->
        </el-header>
        <el-aside>
            <!-- 侧边 -->
        </el-aside>
        <el-main>
            
            <!-- 主要 -->
            <el-row :gutter="0" type="flex" class="row-bg" justify="center">
                <el-col :xs="18" :sm="12" :md="8" :lg="6" :xl="4">
                    <div class="grid-content bg-purple">

                        <el-tabs v-model="activityName" @tab-click="handleClick">
                                <el-tab-pane name="login" label="登录">
                                    <el-form v-model="R_login" ref="R_login" lable-width="100px" class="login_form">
                                        <el-form-item label="账号:" prop="user">
                                            <el-input 
                                            :minlength="11"
                                            :maxlength="11"
                                            :clearable="true"
                                            :autofocus="true"
                                            :validate-event="true"
                                            v-model="R_login.user" placeholder="请输入账号"></el-input>
                                        </el-form-item>

                                        <el-form-item label="密码:" prop="pass">
                                            <el-input 
                                            :show-password="true"
                                            v-model="R_login.pass" placeholder="请输入密码"></el-input>
                                        </el-form-item>

                                        <el-form-item>
                                            <el-button class="login_button" type="primary">登 录</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-tab-pane>
                                <el-tab-pane name="register" label="注册">
                                    <el-form v-model="R_register" ref="R_register" lable-width="100px" class="register_form">
                                        <el-form-item label="账号:" prop="user">
                                            <el-input
                                            :minlength="11"
                                            :maxlength="11"
                                            :clearable="true"
                                            :autofocus="true"
                                            :validate-event="true"
                                             v-model="R_register.user" placeholder="请输入手机号或邮箱"></el-input>
                                        </el-form-item>

                                        <el-form-item label="密码:" prop="pass">
                                            <el-input v-model="R_register.pass" placeholder="请输入密码"></el-input>
                                        </el-form-item>

                                        <el-form-item label="确认密码:" prop="confirm">
                                            <el-input
                                            :show-password="true"
                                             v-model="R_register.confirm" placeholder="请输入确认密码"></el-input>
                                        </el-form-item>

                                        <el-form-item label="验证码:" prop="vcode">
                                            <el-input
                                            :maxlength="6"
                                            
                                             v-model="R_register.vcode" placeholder="请输入验证码"></el-input>
                                        </el-form-item>

                                        <el-form-item>
                                            <el-button class="login_button" @click="onRegister" type="primary">注 册</el-button>
                                        </el-form-item>
                                    </el-form>
                                </el-tab-pane>
                        </el-tabs>
                    </div></el-col>
            </el-row>

            <el-dialog title="用户注册协议和隐私政策"
                        :visible.sync="dialogVisible"
                        width="50%"
                        :before-close="heandleClose"
                        :show-close="false"
                        :modal-append-to-body="true"
            >
                <span>
                    <h5>【慎重阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议。请充分阅读并理解协议中相关条款内容，其中包括：</h5>
                    <p>1. 与您的免除或限制责任条款；</p>
                    <p>2. 与您约定法律适用和管辖条款；</p>
                    <p>3. 其他粗体下划线标识的重要条款。</p>
                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button id="close" @click="closeDialog">取 消</el-button>
                    <el-button @click="agree" type="primary">同意并签署</el-button>
                </span>
            </el-dialog>

        </el-main>
        <el-footer>
            <!-- 底部 -->
            
        </el-footer>
    </el-container>
</template>

<script>

export default {
    name : 'Test',
    
    data () {
        return {
            R_login : {
                user : '',
                pass : ''
            },
            R_register : {
                user : '',
                pass : '',
                confirm : '',
                vcode : ''
            },
            activityName : 'login', //tab默认窗口
            dialogVisible : false, //dialog默认不显示
            isBuClick : false,

        }
    },
    methods : {
        onLogin : function () {
            console.log(this.R_login.user)
        },
        onRegister () {
            console.log('开始注册')
            console.log(this.R_register)
            console.log({
                id : '1'
            })
            
            this.$axios.post('/register', this.R_register).then((res) => {
                console.log(res)
            })
        },
        handleClick : function (r) {
            console.log("点击了tabs")
            console.log(r.name)
            if (r.name == 'register') {
                this.dialogVisible = true
            } else {
                this.dialogVisible = false
            }
        },
        closeDialog () {//取消弹窗
            this.isBuClick = true
            this.dialogVisible = false
            this.activityName = 'login'
        },
        agree () {//同意并签署
            this.isBuClick = true
            this.dialogVisible = false

        },
        heandleClose (done) {//dialog堵塞关闭
            if (this.isBuClick) {
                // console.log('正常关闭')
                //堵塞其他所有关闭方式
                // console.log(done)
            } else {

            }
        }
        
    },
}
</script>


<style>
.login_button{
    width : 100%;
}

#close{
    float:left;
}
</style>